<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<style type="text/css">
			.box {
				height: 900px;
				width: 1500px;
				background-color: black;
			}

			.role {
				position: absolute;
			}
		</style>
	</head>
	<body>
		<!-- 179000611王少琦 -->
		<div id="game" class="box"></div>
		
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script>
			// 角色设置
			function Role() {
				this.node = $('<img class="role" src="img/player_right.gif"></img>');
				this.position = {
					x: 100,
					y: 100
				}
			}
			
			// 大招设置
			Role.prototype.dazhao = function() {
				var that = this;
				this.node.dblclick(function(event){
					// 变身
					that.node.attr("src","img/player2.gif");
				});
			}
			
			Role.prototype.init = function() {
				// 初始位置
				this.node.css("left", this.position.x);
				this.node.css("top", this.position.y);
				// 大招
				this.dazhao();
				// 放置角色
				$("#game").append(this.node);

			}
			
			// 获取角色当前位置
			Role.prototype.getPosition = function(){
				let pos = {
					x: this.node.position().top+parseInt(this.node.height()/2),
					y: this.node.position().left+parseInt(this.node.width()/2)
				}
				return {
					x: this.node.position().top+parseInt(this.node.height()/2),
					y: this.node.position().left+parseInt(this.node.width()/2)
				}
				
			}
			
			// 获取鼠标位置
			function getMousePos(event) {
				var e = event || window.event;
				return {
					x: e.clientX,
					y: e.clientY
				}
			}
			
			// 移动
			Role.prototype.moveTo = function(position) {
				// 停止
				this.node.stop();
				// 获取角色位置
				let positiont = this.getPosition();
				// 方向
				if(positiont.x > position.x){
					this.node.attr("src","img/player_left.gif");
				}else if(positiont.x <= position.x){
					this.node.attr("src","img/player_right.gif");
				}
				this.node.animate({
					left: position.x - parseInt(this.node.width()/2),
					top: position.y - parseInt(this.node.height()/2)
				}, 800);
			}
			
			// 创建角色
			let player = new Role();
			// 初始化
			player.init();
			$(window).click(function() {
				// 获取鼠标点击位置
				let clickPosition = getMousePos(event);
				// 移动
				player.moveTo(clickPosition)
				
			})
		</script>
	</body>
</html>
